<template>
  <div class="songs">
    <!-- 标签 -->
    <div class="tabcontents">
      <span v-for="(item,index) in tabsinfo" :class="{active:(currtindex == index)}" :key="item.id" @click="togger(index)" >
        {{item.type}}
      </span>
    </div>
    <!-- 表格 -->
    <div class="tables">
      <el-table
      :data="songslist"
      @row-click='player'
      style="width: 100%">
      <el-table-column type='index'></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <img :src='scope.row.album.picUrl'>
        </template>
      </el-table-column>
       <el-table-column label='音乐标题'>
         <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label='歌手'>
        <template slot-scope="scope">
          <span v-for="item in scope.row.artists" :key="item.id">{{item.name}}&nbsp;</span>
        </template>
      </el-table-column>
      <el-table-column label='时长'>
        <template slot-scope="scope">
          <span>{{scope.row.duration | second}}</span>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name:'songs',
    data () {
      return {
       currtindex:0,
       songslist:[],
       tabsinfo:[
         {
           type:'全部',
           id:'0'
         },
         {
           type:'华语',
           id:'7'
         },
         {
           type:'欧美',
           id:'96'
         },
         {
           type:'日本',
           id:'8'
         },
         {
           type:'韩国',
           id:'16'
         },
         ] 
      }
    },
    filters: {
        second(time){
        const date =new Date(time)
        const mm = (date.getMinutes() + '').padStart(2,'0')
        const ss = (date.getSeconds() + '').padStart(2,'0')      
        return `${mm}:${ss}`
      },
    },
    created () {
      this.getplaylistinfo()
    },
    methods: {
    async  togger(index){
        this.currtindex=index
         let res =await this.$http.get('top/song',{params:{
           type:this.tabsinfo[index].id
        }})
       this.songslist = res.data.data
      },
      async getplaylistinfo(){
        let res =await this.$http.get('top/song',{params:{
           type:0
        }})
        console.log(res)
        this.songslist = res.data.data
      },
      //播放音乐
     async player(row){
        let res =await this.$http.get('song/url',{params:{
          id:row.id
        }})
        this.$parent.player = res.data.data[0].url
      }
    }
  }
</script>

<style lang="less" scoped>
   .songs{
    margin: 80px 0 0 250px;
   .tabcontents{
      position: relative;
      left: 1000px;
   }
   .tables{
     img{
       width: 80px;
       height: 80px;
     }
   }
  }
   .active{
     color: red;
   }
</style>